<template>
  <h5>ShallowReadonly 和 readonly</h5>
  <h5>{{ state2 }}</h5>
  <button @click="update">更新数据</button>
</template>
<script>
  import { defineComponent, reactive, readonly, shallowReadonly} from 'vue';
  export default defineComponent({
    name:'ShallowReadonly',
    setup(){
      const state = reactive({
        name:'jackson',
        age:20,
        Car:{
          name:'奔驰',
          color:'black'
        }
      })
      // 只读的数据--->深度只读
      // const state2 = readonly(state)
      // 只读的数据
      const state2 = shallowReadonly(state)
      const update = ()=>{
        // state2.name+='111'
        // state2.Car.name+='111'
        // state2.name+='111'
        state2.Car.name+='111'
      }
      return{
        // state,
        update,
        state2
      }
    }
  })
</script>
<style scoped>
</style>